<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-计算属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
	
	<div class="test-03" >
		<p>原数据：{{message}}</p>
		<p>翻转数据方法1：{{reMessage1}}</p>
		<p>翻转数据方法2：{{reMessage2()}}</p>
		<p v-once="">原名：{{fullname}}</p>
		<p>1s后改first名方式1：{{fullname}}</p>
		<p>1s后改first名方式2：{{fullname1}}</p>
		<p>2s后改全名后：firs：{{firstname}} last：{{lastname}}</p>
	</div>
	
<script>
    var test = { 
    		message : "zxcvbnm",
    		firstname : "lin",
    		lastname : "chun",
    		fullname : "lin chun"
    };
    var vm = new Vue({
    	el:".test-03",
        data: test,
        methods:{
        	reMessage2:function() {//计算属性缓存 vs 方法
        		return this.message.split("").reverse().join("");
        	},
        },
        //计算属性computed
        computed:{//任何复杂逻辑，你都应当使用计算属性
        	reMessage1:function() {
        		return this.message.split("").reverse().join("");
        	},
        	fullname1: function() {
        		return this.firstname +" "+ this.lastname;
        	},
        	fullname2:{//计算属性的 setter
        		//geter[计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter]
        		get: function() {
        			return this.firstname +" "+ this.lastname;
        		},
        		//seter
        		set: function(val) {
        			var names = val.split(" ");
        			this.firstname = names[0];
        			this.lastname = names[names.length - 1]; 
        		}
        	}
        },
        //侦听属性
        watch:{//等同于计算属性computed中fullname1方法
        	firstname: function(val) {
        		this.fullname = val +" "+ this.lastname;
        	},
        	lastname: function(val) {
        		this.fullname = this.firstname +" "+ val;
        	}
        }
    });
   setTimeout(function() {
   	vm.$data.firstname = "林 ";
   },1000);
   setTimeout(function() {
   	vm.fullname2 = "林 春春";
   },2000);
</script>
</body>
</html>